<template>
    <view>
        <Tabs :tabs="tabs" @tabsItemChange="handleTabsItemChange">
            <view class="iot-collect_main">
                <view class="iot-collect_title">
                    <text class="iot-collect_tips active">全部</text>
                    <text class="iot-collect_tips">正在热卖</text>
                    <text class="iot-collect_tips">即将上线</text>
                </view>
                <view class="iot-collect_content">
                    <navigator class="iot-goods_item" :url="'/pages/goods_detail/index?goods_id=' + item.goods_id"
                        v-for="(item, index) in collect" :key="item.goods_id">
                        <!-- 左侧 图片容器 -->

                        <view class="iot-goods_img_wrap">
                            <image mode="widthFix"
                                :src="item.goods_small_logo ? item.goods_small_logo : 'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'">
                            </image>
                        </view>

                        <!-- 右侧 商品容器 -->

                        <view class="iot-goods_info_wrap">
                            <view class="iot-goods_name">{{ item.goods_name }}</view>
                            <view class="iot-goods_price">￥{{ item.goods_price }}</view>
                        </view>
                    </navigator>
                </view>
            </view>
        </Tabs>
    </view>
</template>

<script>
import Tabs from '../../components/Tabs/Tabs';
// pages/collect/index.js
export default {
    components: {
        Tabs
    },
    data() {
        return {
            orders: [],

            tabs: [
                {
                    id: 0,
                    value: '商品收藏',
                    isActive: true
                },
                {
                    id: 1,
                    value: '品牌收藏',
                    isActive: false
                },
                {
                    id: 2,
                    value: '店铺收藏',
                    isActive: false
                },
                {
                    id: 3,
                    value: '浏览器足迹',
                    isActive: false
                }
            ],

            collect: ''
        };
    },
    onShow() {
        const collect = uni.getStorageSync('collect') || [];

        this.collect = collect

    },
    methods: {
        handleTabsItemChange(e) {
            // 1 获取被点击的标题索引
            const { index } = e.detail;
            // 2 修改源数组
            let { tabs } = this;
            tabs.forEach((v, i) => (i === index ? (v.isActive = true) : (v.isActive = false)));
            // 3 赋值到data中

            this.tabs = tabs

        }
    }
};
</script>
<style>
@import './index.css';
</style>
